// 按钮组件

<template>
  <view>
    <!-- 添加按钮 -->
    <view @tap="form.addEvent" v-if="type == 1" class="add-button">
      <text class="iconfont icon-a-2"></text>
    </view>
    <!-- 底部按钮 -->
    <!-- 一个按钮 -->
    <view v-if="type == 2" class="bottom-button button1">
      <view @tap="form.confirmEvent" class="button-item">{{ form.text }}</view>
    </view>
    <!-- 两个按钮 -->
    <view v-if="type == 3" class="bottom-button button2">
      <view @tap="form.leftEvent" class="left-button">{{ form.leftText }}</view>
      <view
        @tap="form.rightEvent"
        class="right-button"
        :style="{ background: form.rightBgc || '' }"
        >{{ form.rightText }}</view
      >
    </view>
    <!-- 三个按钮 -->
    <view v-if="type == 4" class="bottom-button button3">
      <view @tap="form.leftEvent" class="left-button">{{ form.leftText }}</view>
      <view @tap="form.centerEvent" class="center-button">{{
        form.centerText
      }}</view>
      <view @tap="form.rightEvent" class="right-button">{{
        form.rightText
      }}</view>
    </view>

    <!-- 购物车 -->
    <view class="button-cart" v-if="type === 'cart'">
      <view class="left">
        <text
          class="t-icon"
          :class="
            Number(number) > 0
              ? 't-icon-gouwucheyixuan'
              : 't-icon-gouwucheweixuan'
          "
        ></text>
        <text class="tip">已选</text>
        <uni-badge
          v-if="Number(number) > 0"
          absolute="rightTop"
          :max-num="999999"
          :text="number"
          :offset="[-15, -10]"
          :custom-style="{
            backgroundColor: '#F16A68',
            color: '#fff',
            fontSize: '22rpx',
            fontWeight: 500
          }"
        ></uni-badge>
      </view>
      <view class="right" @tap="$emit('confirm')">确定</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: [Number, String],
      required: true
    },
    form: {
      type: Object,
      default: {}
    },
    number: {
      type: [Number, String],
      default: 0
    }
  },
  onLoad(options) {
    // console.log('form is', this.form)
  }
}
</script>

<style lang="less" scoped>
.add-button {
  position: fixed;
  right: 40rpx;
  bottom: 206rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #5cc1ff 0%, #1a96ff 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-a-2 {
    font-size: 48rpx;
    color: #fff;
    font-weight: 500;
  }
}
.bottom-button {
  width: 750rpx;
  height: 165rpx;
  background: #fff;
  z-index: 98;
  position: fixed;
  bottom: 0;
  left: 0;
  padding-top: 18rpx;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
}
.button1 {
  .button-item {
    width: 702rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
.button2,
.button3 {
  .left-button,
  .center-button {
    width: 160rpx;
    height: 80rpx;
    background: #e5e5e5;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    color: #333333;
  }
  .right-button {
    margin-left: 20rpx;
    width: 522rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
.button3 {
  .center-button {
    margin-left: 20rpx;
  }
  .right-button {
    width: 342rpx;
  }
}

.button-cart {
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 165rpx;
  padding: 18rpx 24rpx 0 68rpx;
  background-color: #f9f9f9;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
  border-top: 1px solid #c4c4c4;
  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    .t-icon {
      width: 50rpx;
      height: 50rpx;
    }
    .tip {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #111111;
    }
    uni-badge {
      position: absolute;
    }
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 540rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    border-radius: 50rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
